<template>
  <div>
    <BookList @onRemove="remove" :book-list="bookList" show-type show-status show-remove/>
    <div style="text-align: center;margin-top: 15px">
      <el-pagination hide-on-single-page background layout="prev,pager,next" :total="pageInfo.total" :current-page="pageInfo.page" :page-size="pageInfo.limit" @current-change="currentChange"/>
    </div>
  </div>
</template>

<script>
import BookList from '@/views/front/components/BookList.vue'
export default {
  name: 'LikeView',
  components: { BookList },
  data () {
    return {
      bookList: [],
      pageInfo: {
        page: 1,
        limit: 9,
        total: 0,
        userId: ''
      }
    }
  },
  methods: {
    getBookList () {
      this.$http.get('api/book/like', this.pageInfo).then(({ data }) => {
        this.bookList = [...data.records]
        this.pageInfo.page = data.current
        this.pageInfo.limit = data.size
        this.pageInfo.total = data.total
      })
    },
    currentChange (val) {
      this.pageInfo.page = val
      this.getBookList()
    },
    remove (bookId) {
      this.$confirm('确定取消收藏该图书吗？').then(() => {
        this.$http.get('api/book/like/save', { bookId, userId: this.pageInfo.userId }).then(() => {
          this.$message.success('删除成功')
          this.getBookList()
        })
      })
    }
  },
  created () {
    this.pageInfo.userId = JSON.parse(sessionStorage.getItem('vipInfo')).loginInfo.userId
    this.getBookList()
  }
}
</script>

<style scoped>

</style>
